<template>
  <div class="bottom flexC AlignItemsC flex1">
    <ul class="flex JustifyContentSB table_bodys textC">
      <li class="flex JustifyContentSA AlignItemsC" @click="categoryFun(1)" :class="{ category: category === 1 }">
        <p class="font_20">处置中</p>
        <p class="font_28 ">
          26
          <span class="font_20" style="color: #A2ADBF;">起</span>
        </p>
      </li>
      <li class="flex JustifyContentSA AlignItemsC" @click="categoryFun(2)" :class="{ category: category === 2 }">
        <p class="font_20">内部处置</p>
        <p class="font_28 ">
          26
          <span class="font_20" style="color: #A2ADBF;">起</span>
        </p>
      </li>
      <li class="flex JustifyContentSA AlignItemsC" @click="categoryFun(3)" :class="{ category: category === 3 }">
        <p class="font_20">协同处置</p>
        <p class="font_28 ">
          0
          <span class="font_20" style="color: #A2ADBF;">起</span>
        </p>
      </li>
      <li class="flex JustifyContentSA AlignItemsC" @click="categoryFun(4)" :class="{ category: category === 4 }">
        <p class="font_20">逾期处置</p>
        <p class="font_28 ">
          0
          <span class="font_20" style="color: #A2ADBF;">起</span>
        </p>
      </li>
    </ul>
    <div class="lists">
      <div v-if="category === 1">
        <ul class="flex textC table_body font_s16 colorF farstlist">
          <li class="flex flex1 JustifyContentC AlignItemsC">
            <p><img src="../../assets/img/home/101.png" alt="" /></p>
            <p class="font_s14" style="color: #72F6F8;">记分管理</p>
          </li>
          <li style="padding: 1rem 0rem;"><p style=" width:0.125rem; height:3.1875rem;background:rgba(84,91,102,1);"></p></li>
          <li class="flex flex1 JustifyContentC AlignItemsC" style="color: #72F6F8;">上海浦东孝缘社区服务中心</li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p>无服务确认单</p>
            <p style="color:#9FA9B7 ;">2019/8/27</p>
          </li>

          <li class="flex3">
            <div class="flex JustifyContentSB" style="color: #9FA9B7; padding-right: 1rem;">
              <p class="font_s16">
                发现
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                派单
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                处置
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                完成
                <span class="font_s14" style="display: block;"></span>
              </p>
            </div>
            <img style="width:100%;" src="../../assets/img/home/201.png" alt="" />
          </li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p class="font_20">市医保监督所</p>
            <p style="color: #9FA9B7;">
              <span style="display: inline-block; width:0.625rem;height:0.625rem;background:rgba(67,175,65,1);border-radius:50%;"></span>
              核定中
            </p>
          </li>
        </ul>
        <ul class="flex textC table_body font_s16 colorF ">
          <li class="flex flex1 JustifyContentC AlignItemsC">
            <p><img src="../../assets/img/home/101.png" alt="" /></p>
            <p class="font_s14" style="color: #72F6F8;">记分管理</p>
          </li>
          <li style="padding: 1rem 0rem;"><p style=" width:0.125rem; height:3.1875rem;background:rgba(84,91,102,1);"></p></li>
          <li class="flex flex1 JustifyContentC AlignItemsC" style="color: #72F6F8;">上海浦东孝缘社区服务中心</li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p>无服务确认单</p>
            <p style="color:#9FA9B7 ;">2019/8/27</p>
          </li>

          <li class="flex3">
            <div class="flex JustifyContentSB" style="color: #9FA9B7; padding-right: 1rem;">
              <p class="font_s16">
                发现
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                派单
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                处置
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                完成
                <span class="font_s14" style="display: block;"></span>
              </p>
            </div>
            <img style="width:100%;" src="../../assets/img/home/201.png" alt="" />
          </li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p class="font_20">市医保监督所</p>
            <p style="color: #9FA9B7;">
              <span style="display: inline-block; width:0.625rem;height:0.625rem;background:rgba(67,175,65,1);border-radius:50%;"></span>
              核定中
            </p>
          </li>
        </ul>
      </div>
      <div v-if="category === 2">
        <ul class="flex textC table_body font_s16 colorF farstlist">
          <li class="flex flex1 JustifyContentC AlignItemsC">
            <p><img src="../../assets/img/home/101.png" alt="" /></p>
            <p class="font_s14" style="color: #72F6F8;">记分管理</p>
          </li>
          <li style="padding: 1rem 0rem;"><p style=" width:0.125rem; height:3.1875rem;background:rgba(84,91,102,1);"></p></li>
          <li class="flex flex1 JustifyContentC AlignItemsC" style="color: #72F6F8;">上海浦东孝缘社区服务中心</li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p>无服务确认单</p>
            <p style="color:#9FA9B7 ;">2019/8/27</p>
          </li>

          <li class="flex3">
            <div class="flex JustifyContentSB" style="color: #9FA9B7; padding-right: 1rem;">
              <p class="font_s16">
                发现
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                派单
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                处置
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                完成
                <span class="font_s14" style="display: block;"></span>
              </p>
            </div>
            <img style="width:100%;" src="../../assets/img/home/202.png" alt="" />
          </li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p class="font_20">市医保监督所</p>
            <p style="color: #9FA9B7;">
              <span style="display: inline-block; width:0.625rem;height:0.625rem;background:rgba(67,175,65,1);border-radius:50%;"></span>
              核定中
            </p>
          </li>
        </ul>
        <ul class="flex textC table_body font_s16 colorF ">
          <li class="flex flex1 JustifyContentC AlignItemsC">
            <p><img src="../../assets/img/home/101.png" alt="" /></p>
            <p class="font_s14" style="color: #72F6F8;">记分管理</p>
          </li>
          <li style="padding: 1rem 0rem;"><p style=" width:0.125rem; height:3.1875rem;background:rgba(84,91,102,1);"></p></li>
          <li class="flex flex1 JustifyContentC AlignItemsC" style="color: #72F6F8;">上海浦东孝缘社区服务中心</li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p>无服务确认单</p>
            <p style="color:#9FA9B7 ;">2019/8/27</p>
          </li>

          <li class="flex3">
            <div class="flex JustifyContentSB" style="color: #9FA9B7; padding-right: 1rem;">
              <p class="font_s16">
                发现
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                派单
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                处置
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                完成
                <span class="font_s14" style="display: block;"></span>
              </p>
            </div>
            <img style="width:100%;" src="../../assets/img/home/202.png" alt="" />
          </li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p class="font_20">市医保监督所</p>
            <p style="color: #9FA9B7;">
              <span style="display: inline-block; width:0.625rem;height:0.625rem;background:rgba(67,175,65,1);border-radius:50%;"></span>
              核定中
            </p>
          </li>
        </ul>
      </div>
      <div v-if="category === 3">
        <ul class="flex textC table_body font_s16 colorF farstlist">
          <li class="flex flex1 JustifyContentC AlignItemsC">
            <p><img src="../../assets/img/home/101.png" alt="" /></p>
            <p class="font_s14" style="color: #72F6F8;">记分管理</p>
          </li>
          <li style="padding: 1rem 0rem;"><p style=" width:0.125rem; height:3.1875rem;background:rgba(84,91,102,1);"></p></li>
          <li class="flex flex1 JustifyContentC AlignItemsC" style="color: #72F6F8;">上海浦东孝缘社区服务中心</li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p>无服务确认单</p>
            <p style="color:#9FA9B7 ;">2019/8/27</p>
          </li>

          <li class="flex3">
            <div class="flex JustifyContentSB" style="color: #9FA9B7; padding-right: 1rem;">
              <p class="font_s16">
                发现
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                派单
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                处置
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                完成
                <span class="font_s14" style="display: block;"></span>
              </p>
            </div>
            <img style="width:100%;" src="../../assets/img/home/203.png" alt="" />
          </li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p class="font_20">市医保监督所</p>
            <p style="color: #9FA9B7;">
              <span style="display: inline-block; width:0.625rem;height:0.625rem;background:rgba(67,175,65,1);border-radius:50%;"></span>
              核定中
            </p>
          </li>
        </ul>
        <ul class="flex textC table_body font_s16 colorF ">
          <li class="flex flex1 JustifyContentC AlignItemsC">
            <p><img src="../../assets/img/home/101.png" alt="" /></p>
            <p class="font_s14" style="color: #72F6F8;">记分管理</p>
          </li>
          <li style="padding: 1rem 0rem;"><p style=" width:0.125rem; height:3.1875rem;background:rgba(84,91,102,1);"></p></li>
          <li class="flex flex1 JustifyContentC AlignItemsC" style="color: #72F6F8;">上海浦东孝缘社区服务中心</li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p>无服务确认单</p>
            <p style="color:#9FA9B7 ;">2019/8/27</p>
          </li>

          <li class="flex3">
            <div class="flex JustifyContentSB" style="color: #9FA9B7; padding-right: 1rem;">
              <p class="font_s16">
                发现
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                派单
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                处置
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                完成
                <span class="font_s14" style="display: block;"></span>
              </p>
            </div>
            <img style="width:100%;" src="../../assets/img/home/203.png" alt="" />
          </li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p class="font_20">市医保监督所</p>
            <p style="color: #9FA9B7;">
              <span style="display: inline-block; width:0.625rem;height:0.625rem;background:rgba(67,175,65,1);border-radius:50%;"></span>
              核定中
            </p>
          </li>
        </ul>
      </div>
      <div v-if="category === 4">
        <ul class="flex textC table_body font_s16 colorF farstlist">
          <li class="flex flex1 JustifyContentC AlignItemsC">
            <p><img src="../../assets/img/home/101.png" alt="" /></p>
            <p class="font_s14" style="color: #72F6F8;">记分管理</p>
          </li>
          <li style="padding: 1rem 0rem;"><p style=" width:0.125rem; height:3.1875rem;background:rgba(84,91,102,1);"></p></li>
          <li class="flex flex1 JustifyContentC AlignItemsC" style="color: #72F6F8;">上海浦东孝缘社区服务中心</li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p>无服务确认单</p>
            <p style="color:#9FA9B7 ;">2019/8/27</p>
          </li>

          <li class="flex3">
            <div class="flex JustifyContentSB" style="color: #9FA9B7; padding-right: 1rem;">
              <p class="font_s16">
                发现
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                派单
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                处置
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                完成
                <span class="font_s14" style="display: block;"></span>
              </p>
            </div>
            <img style="width:100%;" src="../../assets/img/home/204.png" alt="" />
          </li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p class="font_20">市医保监督所</p>
            <p style="color: #9FA9B7;">
              <span style="display: inline-block; width:0.625rem;height:0.625rem;background:rgba(67,175,65,1);border-radius:50%;"></span>
              核定中
            </p>
          </li>
        </ul>
        <ul class="flex textC table_body font_s16 colorF">
          <li class="flex flex1 JustifyContentC AlignItemsC">
            <p><img src="../../assets/img/home/101.png" alt="" /></p>
            <p class="font_s14" style="color: #72F6F8;">记分管理</p>
          </li>
          <li style="padding: 1rem 0rem;"><p style=" width:0.125rem; height:3.1875rem;background:rgba(84,91,102,1);"></p></li>
          <li class="flex flex1 JustifyContentC AlignItemsC" style="color: #72F6F8;">上海浦东孝缘社区服务中心</li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p>无服务确认单</p>
            <p style="color:#9FA9B7 ;">2019/8/27</p>
          </li>

          <li class="flex3">
            <div class="flex JustifyContentSB" style="color: #9FA9B7; padding-right: 1rem;">
              <p class="font_s16">
                发现
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                派单
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                处置
                <span class="font_s14" style="display: block;">9-20 12:45:56</span>
              </p>
              <p class="font_s16">
                完成
                <span class="font_s14" style="display: block;"></span>
              </p>
            </div>
            <img style="width:100%;" src="../../assets/img/home/204.png" alt="" />
          </li>
          <li class="flexC flex1 JustifyContentC AlignItemsC">
            <p class="font_20">市医保监督所</p>
            <p style="color: #9FA9B7;">
              <span style="display: inline-block; width:0.625rem;height:0.625rem;background:rgba(67,175,65,1);border-radius:50%;"></span>
              核定中
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ComBottom',
  data () {
    return {
      category: 1,
      text: [{ imgrc: '../../assets/img/home/101.png' }]
    }
  },
  methods: {
    categoryFun (index) {
      this.category = index
    }
  }
}
</script>
<style lang="scss" scoped>
.bottom {
  height: 24vh;
  .lists {
    overflow: hidden;
    .farstlist {
      animation: animation_1 8s linear infinite;
      @keyframes animation_1 {
        from {
          margin-top: 0.25rem;
        }
        to {
          margin-top: -14rem;
        }
      }
    }
  }

  .table_body {
    width: 116.25rem;
    height: 4.9375rem;
    margin: 0.75rem 0rem;
    font-weight: 400;
    li {
      background: rgba(27, 37, 67, 1);
    }
  }
  .table_bodys {
    width: 116.25rem;
    padding: 1.0625rem 0rem;
    li {
      width: 27.4375rem;
      height: 2.5rem;
      background: url(../../assets/img/home/103.png) no-repeat;
      background-size: 100% 100%;
      color: #ffffff;
    }
    .category {
      color: #72f6f8;
      background: url(../../assets/img/home/104.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
